<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>坐标系统</title>
</head>
<body>
    <canvas id="canvas" width="800" height="700" style="border: 1px solid #000"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.strokeStyle = '#000';
        ctx.font = '50px Palatino';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.save();
        ctx.fillStyle = 'grey';
        /************正常****************/
        ctx.fillRect(0, 0, 500, 250);
        ctx.strokeText('normal', 250, 0);
        /************位移****************/
        ctx.translate(200, 100);
        ctx.fillStyle = 'blue';
        ctx.fillRect(0, 0, 500, 250);
        ctx.strokeText('translate', 250, 0);
        /************旋转***************/
        ctx.rotate(45 * Math.PI / 180);
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, 500, 250);
        ctx.textAlign = 'right';
        ctx.strokeText('rotate', 500, 0);
        /************缩放***************/
        ctx.scale(0.5, 0.5);
        ctx.fillStyle = 'yellow';
        ctx.fillRect(0, 0, 500, 250);
        ctx.textAlign = 'center';
        ctx.strokeText('scale', 250, 0);
        /************save&restore***************/
        ctx.restore();
        ctx.fillStyle = 'LIGHTSALMON';
        ctx.fillRect(0, 0, 500, 250);
        ctx.strokeText('restore', 250, 0);
    </script>
</body>
</html>